<script setup>
import { ref, nextTick } from 'vue';

const props = defineProps({
    goodsList: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['remove-goods', 'add-tag', 'show-input']);

const inputRef = ref(null);
const activeItem = ref(null);

const handleRemove = (id) => {
  emit('remove-goods', id);
};

const handleShowInput = (item) => {
  activeItem.value = item;
  emit('show-input', item);

  setTimeout(() => {
    nextTick(() => {
      if (inputRef.value) {
        inputRef.value.focus();
      }
    });
  }, 50);
};

const handleAddTag = (item) => {
  emit('add-tag', item, item.inputValue);
  activeItem.value = null;
};

const handleInputConfirm = (item) => {
  if (item.inputValue) {
    handleAddTag(item);
  }
};

const handleInputEsc = (item) => {
  item.inputValue = '';

  setTimeout(() => {
    item.inputVisible = false;
    activeItem.value = null;
  }, 10);
};
</script>

<template>
  <div class="mt-5 overflow-x-auto shadow-md rounded-lg">
    <table class="border-collapse min-w-full bg-white border border-gray-200 table-auto">
      <thead>
        <tr>
          <th class="py-4 px-6 bg-gray-50 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">ID</th>
          <th class="py-4 px-6 bg-gray-50 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">商品名称</th>
          <th class="py-4 px-6 bg-gray-50 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">价格</th>
          <th class="py-4 px-6 bg-gray-50 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">标签</th>
          <th class="py-4 px-6 bg-gray-50 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">操作</th>
        </tr>
      </thead>
      <transition-group
        tag="tbody"
        class="bg-white divide-y divide-gray-200"
        style="min-height: 100px;"
        enter-active-class="transition-all duration-500 ease-in-out transform"
        leave-active-class="transition-all duration-700 ease-in-out transform"
        enter-from-class="opacity-0 translate-x-8"
        leave-to-class="opacity-0 -translate-x-8 max-h-0 overflow-hidden"
        move-class="transition-transform duration-700 ease-in-out"
      >
          <tr v-for="item in goodsList" :key="item.id"
              :class="{'hover:bg-gray-50': !item._deleting, 'opacity-0 max-h-0 py-0 my-0 border-none': item._deleting}"
              class="transition-all duration-500 ease-in-out will-change-transform"
              style="max-height: 500px; transition-property: all;">
          <td class="py-4 px-6 whitespace-nowrap text-base">{{ item.id }}</td>
          <td class="py-4 px-6 text-base">{{ item.goods_name }}</td>
          <td class="py-4 px-6 whitespace-nowrap text-base font-medium text-gray-700">¥{{ item.goods_price }}</td>
          <td class="py-4 px-6 min-h-[80px]">
            <div class="flex flex-wrap items-center gap-y-2 min-h-[36px] transition-all duration-300 ease-in-out">
              <transition-group
                tag="div"
                class="flex flex-wrap items-center"
                enter-active-class="transition-all delay-150 duration-300 ease-in-out transform"
                leave-active-class="transition-all delay-150 duration-300 ease-in-out transform"
                enter-from-class="opacity-0 translate-y-2"
                leave-to-class="opacity-0 -translate-x-2"
              >
                <span
                  v-for="(tag, index) in item.tags"
                  :key="tag"
                  class="inline-flex items-center px-3 py-1 mr-2 h-[36px] rounded-md text-base font-medium bg-blue-100 text-blue-800 transition-all duration-200 ease-in-out hover:bg-blue-200 hover:scale-105 transform border-2 border-blue-200 shadow-sm"
                >
                  {{ tag }}
                </span>
              </transition-group>

              <div class="inline-flex items-center relative w-[150px] h-[36px] overflow-hidden">
                <transition
                  enter-active-class="transition-all duration-500 ease-in-out transform"
                  leave-active-class="transition-all duration-500 ease-in-out transform"
                  enter-from-class="opacity-0 scale-95"
                  leave-to-class="opacity-0 scale-95"
                  mode="out-in"
                >
                  <div
                    v-if="item.inputVisible"
                    class="absolute inset-0 w-full"
                  >
                    <input
                      :ref="activeItem === item ? el => inputRef = el : undefined"
                      v-model="item.inputValue"
                      class="border-2 border-gray-300 rounded-md px-3 text-base w-full h-[36px] focus:outline-none focus:border-blue-500 shadow-sm"
                      type="text"
                      placeholder="输入标签"
                      @keyup.enter="handleInputConfirm(item)"
                      @keyup.esc="handleInputEsc(item)"
                      @blur="handleAddTag(item)"
                    />
                  </div>
                </transition>

                <transition
                  enter-active-class="transition-all duration-500 ease-in-out transform"
                  leave-active-class="transition-all duration-500 ease-in-out transform"
                  enter-from-class="opacity-0 scale-95"
                  leave-to-class="opacity-0 scale-95"
                  mode="out-in"
                >
                  <button
                    v-if="!item.inputVisible"
                    class="absolute inset-0 inline-flex items-center justify-center px-3 py-1 h-[36px] rounded-md text-base font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 w-[90px] transition-colors duration-300 border-2 border-gray-300 shadow-sm"
                    @click="handleShowInput(item)"
                  >
                    + Tag
                  </button>
                </transition>
              </div>
            </div>
          </td>
          <td class="py-4 px-6 whitespace-nowrap">
            <button
              @click="handleRemove(item.id)"
              class="px-4 py-2 bg-red-100 text-red-600 hover:bg-red-200 hover:scale-105 active:scale-95 rounded-md font-medium text-base transition-all duration-200 transform border-2 border-red-200 shadow-sm"
              :disabled="item._deleting"
            >
              删除
            </button>
          </td>
        </tr>
      </transition-group>
    </table>
  </div>
</template>

<style scoped>

</style>